<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用户管理</title>
		<link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css" />
		<link rel="stylesheet" type="text/css" href="../css/xu.css" />
		<link rel="stylesheet" type="text/css" href="../css/icon.css" />
		<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>
		<script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script>
		<script src="../js/jquery.serializejson.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="easyui-layout" data-options="fit:true" title="用户管理">
		    <!-- Begin of toolbar -->
		    <div id="xu-toolbar-2">
		        <div class="xu-toolbar-button">
		            <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="data()" plain="true">添加</a>
		            <a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="removeData()" plain="true">删除</a>
		        </div>
		    </div>
		    <!-- End of toolbar -->
		    <table id="xu-datagrid-2" class="easyui-datagrid" toolbar="#xu-toolbar-2"></table>
		</div>
		<!-- Begin of easyui-dialog -->
		<div id="xu-dialog-2" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:400px; padding:10px;">
			<form id="xu-form-2" method="post">
		        <table>
		            <tr>
		                <td width="60" align="right">名 字:</td>
		                <td><input type="text" name="name" class="xu-text" /></td>
		            </tr>
		            <tr>
		                <td align="right" style="width:100px">所属新闻标题:</td>
		                <td><input id="cc" class="easyui-combobox" name="news_id" style="width:250px;" data-options="valueField:'_id',textField:'title',url:'http://localhost:3000/news/find',method:'post'" panelHeight="100"></input></td>
		            </tr>
		            <tr>
		                <td align="right">内 容:</td>
		                <td><input type="text" name="content" class="xu-text" /></td>
		            </tr>
		        </table>
		    </form>
		</div>
		<!-- End of easyui-dialog -->
		<script type="text/javascript">
			var news_id;
			news_id = GetQueryString('news_id') || null;
			$('#xu-datagrid-2').datagrid({
				url:'http://localhost:3000/comment/list',		
				pageSize:10,
				pageList:[5,10,15,20,25],
				pagination:true,
				fit:true,
				toolbar:'#xu-toolbar-2',
				queryParams:{news_id:news_id},
				columns:[[
					{ field:'checkbox',checkbox:true},
					{ field:'name',title:'姓名',width:'8%',align:'center'},
					{ field:'content',title:'内容',width:'45%',align:'center'},
					{ field:'commentDate',title:'评论时间',width:'30%',align:'center'},
					{ field:'update',width:80,align:'center',title:'修改',
						formatter:function(val,row,index){
							var str =	`<a class="l-btn-left l-btn-icon-left" href="javascript:void(0)" onclick="data(${index})">
											<span class="l-btn-text">修改</span>
											<span class="l-btn-icon icon-edit">&nbsp;</span>
										</a>
										`
							return str;
						}
					},
					{ field:'remove',width:80,align:'center',title:'删除',
						formatter:function(val,row,index){
							var str =	`<a class="l-btn-left l-btn-icon-left" href="javascript:void(0)" onclick="removeData(${index})">
											<span class="l-btn-text">删除</span>
											<span class="l-btn-icon icon-remove">&nbsp;</span>
										</a>
										`
							return str;
						}
					}
					
				]]
			});

			function GetQueryString(name)	//获取地址栏参数  name为参数名
			{
			     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
			     var r = window.location.search.substr(1).match(reg);
			     if(r!=null)return  unescape(r[2]); return null;
			}
			
			//修改数据和添加数据都在这里
			function data(index){
				var dataUrl = '';
				var t_datagrid = $('#xu-datagrid-2');	//表格
				var t_dataform = $('#xu-form-2');		//表单
				var t_dialog = $('#xu-dialog-2');		//弹窗

				if(index !== undefined){
					t_datagrid.datagrid('selectRow',index);
					//获取到被点击的那一项，并返回出一个json对象
					var row = t_datagrid.datagrid('getSelected');
					//通过load 直接对被选中的行重载到弹出框的表单中
					t_dataform.form('load',row);
					dataUrl = "http://localhost:3000/comment/data/" + row._id;
				}else{
					dataUrl = "http://localhost:3000/comment/data"
				}
				t_dialog.dialog({
					closed: false,
					modal:true,
		            title: "添加评论",
		            buttons: [{
		                text: '确定',
		                iconCls: 'icon-ok',
		                handler: action
		            }, {
		                text: '取消',
		                iconCls: 'icon-cancel',
		                handler: function () {
		                    t_dialog.dialog('close');
		                    t_dataform.form('clear');                    
		                }
		            }]
		        });

				//利用闭包 获取父函数的变量
				function action(){
					t_dataform.form('submit',{
						onSubmit:function(){
							if ($(this).form('enableValidation').form('validate')){
							$.ajax({
								type:"post",
								url:dataUrl,
								data:t_dataform.serializeJSON()
							}).then(function(res){
								if(res){
									t_dialog.dialog('close');
									$.messager.alert('信息提示','提交成功','info',function(){
										t_datagrid.datagrid('reload');
									});
								}else{
									$.messager.alert('信息提示','提交失败！','info');
								}
								t_dataform.form('clear');
							});
				            }else{
				            	t_dataform.form('clear');
				            	alert('no')
				            }
						}
					})
				}
			}
			function removeData(index){
				$.messager.confirm('信息提示','确定要删除该记录？', function(result){
					if(result){
						var ids = [];
						if(index !== undefined){
							$('#xu-datagrid-2').datagrid('selectRow',index);
							var row = $('#xu-datagrid-2').datagrid('getSelected');
							ids.push(row._id);
						}else{
							var items = $('#xu-datagrid-2').datagrid('getSelections');
							var ids = [];
							$(items).each(function(){
								ids.push(this._id);	
							});
						}
						$.ajax({
							url:'http://localhost:3000/comment/data/'+ids,
							type:'delete',
							success:function(data){
								if(data){
									$.messager.alert('信息提示','删除成功！','info',function(){
										$('#xu-datagrid-2').datagrid('reload');
									});		
								}
								else
								{
									$.messager.alert('信息提示','删除失败！','info');		
								}
							}	
						});
						
					}	
				});
			}
			
		</script>
		
		
	</body>
</html>




